React Concurrent Mode Time Slicing: Rendering Time Budget Allocation

React Concurrent Mode là một tính năng thay đổi cuộc chơi, mở ra một cấp độ mới về khả năng phản hồi và hiệu suất trong các ứng dụng React. Trọng tâm của Concurrent Mode là khái niệm time slicing (phân chia thời gian), cho phép React chia nhỏ các tác vụ kết xuất chạy dài thành các phần nhỏ hơn, dễ quản lý hơn. Bài đăng trên blog này sẽ đi sâu vào sự phức tạp của time slicing, việc phân bổ ngân sách thời gian kết xuất và cách nó đóng góp vào việc cải thiện đáng kể trải nghiệm người dùng.

Understanding the Need for Concurrent Mode

React truyền thống hoạt động theo cách đồng bộ. Khi một thành phần cập nhật, React chặn luồng chính cho đến khi toàn bộ cây thành phần được kết xuất lại. Điều này có thể dẫn đến sự chậm trễ đáng chú ý, đặc biệt là trong các ứng dụng phức tạp với nhiều thành phần hoặc logic kết xuất tốn nhiều tính toán. Những sự chậm trễ này có thể biểu hiện như sau:

• Janky animations (Hình ảnh động giật cục): Hình ảnh động xuất hiện rời rạc và không đồng đều do trình duyệt bị chặn trong quá trình kết xuất.
• Unresponsive UI (Giao diện người dùng không phản hồi): Ứng dụng trở nên không phản hồi với đầu vào của người dùng (nhấp chuột, nhấn phím) trong khi React đang kết xuất.
• Poor perceived performance (Hiệu suất cảm nhận kém): Người dùng trải nghiệm ứng dụng chậm chạp và ì ạch, ngay cả khi việc tìm nạp dữ liệu cơ bản diễn ra nhanh chóng.

Concurrent Mode giải quyết những vấn đề này bằng cách cho phép React hoạt động không đồng bộ, cho phép nó xen kẽ các tác vụ kết xuất với các hoạt động khác, chẳng hạn như xử lý đầu vào của người dùng hoặc cập nhật giao diện người dùng. Time slicing là một cơ chế quan trọng giúp điều này trở nên khả thi.

What is Time Slicing?

Time slicing, còn được gọi là cooperative multitasking (đa nhiệm hợp tác), là một kỹ thuật trong đó một tác vụ chạy dài được chia thành các đơn vị công việc nhỏ hơn. Kiến trúc Fiber của React, tạo thành nền tảng của Concurrent Mode, cho phép React tạm dừng, tiếp tục và thậm chí từ bỏ công việc kết xuất khi cần thiết. Thay vì chặn luồng chính trong toàn bộ thời gian cập nhật kết xuất, React có thể trả lại quyền kiểm soát cho trình duyệt một cách định kỳ, cho phép nó xử lý các sự kiện khác và duy trì giao diện người dùng phản hồi nhanh.

Hãy nghĩ về nó như thế này: hãy tưởng tượng bạn đang vẽ một bức tranh tường lớn. Thay vì cố gắng vẽ toàn bộ bức tranh tường trong một phiên liên tục, bạn chia nó thành các phần nhỏ hơn và làm việc trên từng phần trong một khoảng thời gian ngắn. Điều này cho phép bạn nghỉ ngơi, trả lời các câu hỏi từ những người qua đường và đảm bảo rằng bức tranh tường đang tiến triển suôn sẻ mà không khiến bạn quá tải. Tương tự, React chia các tác vụ kết xuất thành các phần nhỏ hơn và xen kẽ chúng với các hoạt động khác của trình duyệt.

Rendering Time Budget Allocation

Một khía cạnh quan trọng của time slicing là việc phân bổ rendering time budget (ngân sách thời gian kết xuất). Điều này đề cập đến lượng thời gian mà React được phép dành để kết xuất trước khi trả lại quyền kiểm soát cho trình duyệt. Sau đó, trình duyệt có cơ hội xử lý đầu vào của người dùng, cập nhật màn hình và thực hiện các tác vụ khác. Sau khi trình duyệt đã thực hiện xong lượt của mình, React có thể tiếp tục kết xuất từ nơi nó đã dừng lại, sử dụng một phần khác trong ngân sách thời gian được phân bổ của nó.

Ngân sách thời gian cụ thể được phân bổ cho React được xác định bởi trình duyệt và các tài nguyên có sẵn. React hướng đến việc trở thành một công dân tốt và tránh độc quyền luồng chính, đảm bảo rằng trình duyệt vẫn phản hồi với các tương tác của người dùng.

How React Manages the Time Budget

React sử dụng API `requestIdleCallback` (hoặc một polyfill tương tự cho các trình duyệt cũ hơn) để lên lịch công việc kết xuất. `requestIdleCallback` cho phép React thực hiện các tác vụ nền khi trình duyệt ở trạng thái rảnh, có nghĩa là nó không bận xử lý đầu vào của người dùng hoặc thực hiện các hoạt động quan trọng khác. Callback được cung cấp cho `requestIdleCallback` nhận được một đối tượng `deadline` (thời hạn), cho biết lượng thời gian còn lại trong khoảng thời gian rảnh hiện tại. React sử dụng thời hạn này để xác định lượng công việc kết xuất mà nó có thể thực hiện trước khi trả lại quyền kiểm soát cho trình duyệt.

Dưới đây là một minh họa đơn giản về cách React có thể quản lý ngân sách thời gian:

1. React lên lịch công việc kết xuất bằng cách sử dụng `requestIdleCallback`.
2. Khi `requestIdleCallback` được thực thi, React nhận được một đối tượng `deadline`.
3. React bắt đầu kết xuất các thành phần.
4. Khi React kết xuất, nó kiểm tra đối tượng `deadline` để xem còn bao nhiêu thời gian.
5. Nếu React hết thời gian (tức là đạt đến thời hạn), nó sẽ tạm dừng kết xuất và trả lại quyền kiểm soát cho trình duyệt.
6. Trình duyệt xử lý đầu vào của người dùng, cập nhật màn hình, v.v.
7. Khi trình duyệt rảnh trở lại, React tiếp tục kết xuất từ nơi nó đã dừng lại, sử dụng một phần khác trong ngân sách thời gian được phân bổ của nó.
8. Quá trình này tiếp tục cho đến khi tất cả các thành phần đã được kết xuất.

Benefits of Time Slicing

Time slicing mang lại một số lợi ích đáng kể cho các ứng dụng React:

• Improved Responsiveness (Cải thiện khả năng phản hồi): Bằng cách chia nhỏ các tác vụ kết xuất thành các phần nhỏ hơn và xen kẽ chúng với các hoạt động khác, time slicing ngăn giao diện người dùng trở nên không phản hồi trong quá trình cập nhật chạy dài. Người dùng có thể tiếp tục tương tác với ứng dụng một cách mượt mà, ngay cả khi React đang kết xuất ở chế độ nền.
• Enhanced Perceived Performance (Nâng cao hiệu suất cảm nhận): Ngay cả khi tổng thời gian kết xuất vẫn giữ nguyên, time slicing có thể làm cho ứng dụng có cảm giác nhanh hơn nhiều. Bằng cách cho phép trình duyệt cập nhật màn hình thường xuyên hơn, React có thể cung cấp phản hồi trực quan cho người dùng nhanh hơn, tạo ra ảo giác về một ứng dụng phản hồi nhanh hơn.
• Better User Experience (Trải nghiệm người dùng tốt hơn): Sự kết hợp giữa khả năng phản hồi được cải thiện và hiệu suất cảm nhận được nâng cao dẫn đến trải nghiệm người dùng tốt hơn đáng kể. Người dùng ít có khả năng gặp phải sự thất vọng hoặc khó chịu do sự chậm trễ hoặc không phản hồi.
• Prioritization of Important Updates (Ưu tiên các bản cập nhật quan trọng): Concurrent Mode cho phép React ưu tiên các bản cập nhật quan trọng, chẳng hạn như các bản cập nhật liên quan đến đầu vào của người dùng. Điều này đảm bảo rằng giao diện người dùng vẫn phản hồi với các tương tác của người dùng, ngay cả khi các bản cập nhật ít quan trọng hơn khác đang được tiến hành.

How to Leverage Time Slicing in Your React Applications

Để tận dụng time slicing, bạn cần bật Concurrent Mode trong ứng dụng React của mình. Điều này có thể được thực hiện bằng cách sử dụng các API thích hợp để tạo một root:

For React 18 and later:

            import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container); // Create a root
root.render(<App />);

            

              
                Copy
              
            
          

For React 17 and earlier (using the `react-dom/unstable_concurrentMode` entry point):

            import ReactDOM from 'react-dom';

ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />);

            

              
                Copy
              
            
          

Sau khi Concurrent Mode được bật, React sẽ tự động áp dụng time slicing cho các bản cập nhật kết xuất. Tuy nhiên, có một số bước bổ sung bạn có thể thực hiện để tối ưu hóa hơn nữa ứng dụng của mình cho Concurrent Mode:

1. Embrace Suspense

Suspense là một thành phần React tích hợp sẵn cho phép bạn xử lý một cách duyên dáng các hoạt động không đồng bộ, chẳng hạn như tìm nạp dữ liệu. Khi một thành phần được bao bọc trong Suspense cố gắng kết xuất dữ liệu chưa có, Suspense sẽ tạm dừng quá trình kết xuất và hiển thị giao diện người dùng dự phòng (ví dụ: một trình tải). Khi dữ liệu có sẵn, Suspense sẽ tự động tiếp tục kết xuất thành phần.

Suspense hoạt động liền mạch với Concurrent Mode, cho phép React ưu tiên kết xuất các phần khác của ứng dụng trong khi chờ dữ liệu tải. Điều này có thể cải thiện đáng kể trải nghiệm người dùng bằng cách ngăn toàn bộ giao diện người dùng bị chặn trong khi chờ dữ liệu.

Example:

            import React, { Suspense } from 'react';

const ProfileDetails = React.lazy(() => import('./ProfileDetails')); // Lazy load the component

function MyComponent() {
 return (
 <Suspense fallback={<div>Loading profile...</div>}>
 <ProfileDetails />
 </Suspense>
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

Trong ví dụ này, thành phần `ProfileDetails` được tải chậm bằng cách sử dụng `React.lazy`. Điều này có nghĩa là thành phần sẽ chỉ được tải khi nó thực sự cần thiết. Thành phần `Suspense` bao bọc `ProfileDetails` và hiển thị thông báo tải trong khi thành phần đang được tải. Điều này ngăn toàn bộ ứng dụng bị chặn trong khi chờ thành phần tải.

2. Use Transitions

Transitions là một cơ chế để đánh dấu các bản cập nhật là không khẩn cấp. Khi bạn bao bọc một bản cập nhật trong `useTransition`, React sẽ ưu tiên các bản cập nhật khẩn cấp (chẳng hạn như các bản cập nhật liên quan đến đầu vào của người dùng) hơn bản cập nhật chuyển đổi. Điều này cho phép bạn trì hoãn các bản cập nhật không quan trọng cho đến khi trình duyệt có thời gian xử lý chúng mà không chặn giao diện người dùng.

Transitions đặc biệt hữu ích cho các bản cập nhật có thể kích hoạt kết xuất tốn nhiều tính toán, chẳng hạn như lọc một danh sách lớn hoặc cập nhật một biểu đồ phức tạp. Bằng cách đánh dấu các bản cập nhật này là không khẩn cấp, bạn có thể đảm bảo rằng giao diện người dùng vẫn phản hồi với các tương tác của người dùng, ngay cả khi các bản cập nhật đang được tiến hành.

Example:

            import React, { useState, useTransition } from 'react';

function MyComponent() {
 const [query, setQuery] = useState('');
 const [list, setList] = useState(initialList);
 const [isPending, startTransition] = useTransition();

 const handleChange = (e) => {
 const newQuery = e.target.value;
 setQuery(newQuery);

 startTransition(() => {
 // Filter the list based on the query
 setList(initialList.filter(item => item.toLowerCase().includes(newQuery.toLowerCase())));
 });
 };

 return (
 <div>
 <input type="text" value={query} onChange={handleChange} />
 {isPending ? <p>Filtering...</p> : null}
 <ul>
 {list.map(item => (<li key={item}>{item}</li>))}
 </ul>
 </div>
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

Trong ví dụ này, hàm `handleChange` lọc một danh sách dựa trên đầu vào của người dùng. Hàm `startTransition` được sử dụng để bao bọc lệnh gọi `setList`, đánh dấu bản cập nhật là không khẩn cấp. Điều này cho phép React ưu tiên các bản cập nhật khác, chẳng hạn như cập nhật trường đầu vào, hơn là lọc danh sách. Biến trạng thái `isPending` cho biết liệu quá trình chuyển đổi có đang diễn ra hay không, cho phép bạn hiển thị một chỉ báo tải.

3. Optimize Component Rendering

Ngay cả với time slicing, điều quan trọng vẫn là tối ưu hóa việc kết xuất thành phần của bạn để giảm thiểu lượng công việc mà React cần thực hiện. Một số chiến lược để tối ưu hóa việc kết xuất thành phần bao gồm:

• Memoization: Sử dụng `React.memo` hoặc `useMemo` để ngăn các thành phần kết xuất lại một cách không cần thiết.
• Code Splitting: Chia nhỏ ứng dụng của bạn thành các phần nhỏ hơn và tải chúng theo yêu cầu bằng cách sử dụng `React.lazy` và `Suspense`.
• Virtualization: Sử dụng các thư viện như `react-window` hoặc `react-virtualized` để kết xuất hiệu quả các danh sách và bảng lớn.
• Efficient Data Structures: Sử dụng các cấu trúc dữ liệu hiệu quả (ví dụ: Maps, Sets) để cải thiện hiệu suất của các hoạt động thao tác dữ liệu.

4. Profile Your Application

Sử dụng React Profiler để xác định các nút thắt hiệu suất trong ứng dụng của bạn. Profiler cho phép bạn ghi lại thời gian kết xuất của từng thành phần và xác định các khu vực bạn có thể cải thiện hiệu suất.

Considerations and Potential Drawbacks

Mặc dù Concurrent Mode và time slicing mang lại những lợi ích đáng kể, nhưng cũng có một số cân nhắc và hạn chế tiềm ẩn cần lưu ý:

• Increased Complexity (Tăng độ phức tạp): Concurrent Mode có thể làm tăng độ phức tạp cho ứng dụng của bạn, đặc biệt nếu bạn không quen thuộc với các khái niệm lập trình không đồng bộ.
• Compatibility Issues (Vấn đề tương thích): Một số thư viện và thành phần cũ hơn có thể không hoàn toàn tương thích với Concurrent Mode. Bạn có thể cần cập nhật hoặc thay thế các thư viện này để đảm bảo rằng ứng dụng của bạn hoạt động chính xác.
• Debugging Challenges (Thách thức gỡ lỗi): Gỡ lỗi mã không đồng bộ có thể khó khăn hơn gỡ lỗi mã đồng bộ. Bạn có thể cần sử dụng các công cụ gỡ lỗi chuyên dụng để hiểu luồng thực thi trong ứng dụng của mình.
• Potential for Stuttering (Khả năng bị giật cục): Trong một số trường hợp hiếm hoi, time slicing có thể dẫn đến hiệu ứng giật cục nhẹ nếu React liên tục tạm dừng và tiếp tục kết xuất. Điều này thường có thể được giảm thiểu bằng cách tối ưu hóa việc kết xuất thành phần và sử dụng các chuyển đổi một cách thích hợp.

Real-World Examples and Use Cases

Time slicing đặc biệt có lợi trong các ứng dụng có các đặc điểm sau:

• Complex UIs (Giao diện người dùng phức tạp): Các ứng dụng có cây thành phần lớn hoặc logic kết xuất tốn nhiều tính toán.
• Frequent Updates (Cập nhật thường xuyên): Các ứng dụng yêu cầu cập nhật thường xuyên cho giao diện người dùng, chẳng hạn như bảng điều khiển thời gian thực hoặc hình ảnh hóa tương tác.
• Slow Network Connections (Kết nối mạng chậm): Các ứng dụng cần xử lý các kết nối mạng chậm một cách duyên dáng.
• Large Datasets (Bộ dữ liệu lớn): Các ứng dụng cần hiển thị và thao tác với bộ dữ liệu lớn.

Dưới đây là một số ví dụ cụ thể về cách time slicing có thể được sử dụng trong các ứng dụng thực tế:

• E-commerce websites (Trang web thương mại điện tử): Cải thiện khả năng phản hồi của danh sách sản phẩm và kết quả tìm kiếm bằng cách trì hoãn các bản cập nhật ít quan trọng hơn.
• Social media platforms (Nền tảng truyền thông xã hội): Đảm bảo rằng giao diện người dùng vẫn phản hồi với các tương tác của người dùng trong khi tải các bài đăng và bình luận mới.
• Mapping applications (Ứng dụng bản đồ): Kết xuất mượt mà các bản đồ phức tạp và dữ liệu địa lý bằng cách chia nhỏ các tác vụ kết xuất thành các phần nhỏ hơn.
• Financial dashboards (Bảng điều khiển tài chính): Cung cấp các bản cập nhật theo thời gian thực cho dữ liệu tài chính mà không chặn giao diện người dùng.
• Collaborative editing tools (Công cụ chỉnh sửa cộng tác): Cho phép nhiều người dùng chỉnh sửa tài liệu đồng thời mà không gặp phải tình trạng lag hoặc không phản hồi.

Conclusion

Tính năng time slicing của React Concurrent Mode là một công cụ mạnh mẽ để cải thiện khả năng phản hồi và hiệu suất cảm nhận của các ứng dụng React. Bằng cách chia nhỏ các tác vụ kết xuất thành các phần nhỏ hơn và xen kẽ chúng với các hoạt động khác, time slicing ngăn giao diện người dùng trở nên không phản hồi trong quá trình cập nhật chạy dài. Bằng cách nắm bắt Suspense, Transitions và các kỹ thuật tối ưu hóa khác, bạn có thể mở khóa toàn bộ tiềm năng của Concurrent Mode và tạo ra trải nghiệm người dùng tốt hơn đáng kể.

Mặc dù Concurrent Mode có thể làm tăng độ phức tạp cho ứng dụng của bạn, nhưng những lợi ích mà nó mang lại về hiệu suất và trải nghiệm người dùng là hoàn toàn xứng đáng với nỗ lực bỏ ra. Khi React tiếp tục phát triển, Concurrent Mode có khả năng trở thành một phần ngày càng quan trọng của hệ sinh thái React. Hiểu time slicing và việc phân bổ ngân sách thời gian kết xuất của nó là điều cần thiết để xây dựng các ứng dụng React hiệu suất cao, phản hồi nhanh, mang lại trải nghiệm người dùng thú vị cho khán giả toàn cầu, từ các thành phố đô thị nhộn nhịp như Tokyo, Nhật Bản đến các khu vực xa xôi có băng thông hạn chế ở các quốc gia như Mông Cổ. Cho dù người dùng của bạn đang sử dụng máy tính để bàn cao cấp hay thiết bị di động công suất thấp, Concurrent Mode có thể giúp bạn cung cấp trải nghiệm mượt mà và phản hồi nhanh.